<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专家评估</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<style>
    html,body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #test2 {
        height:100%;
    }
    .el-container {
        height:100%;
    }
    .el-aside {
        color: #333;
        text-align: center;
        line-height: 200px;
        height:100%;
        padding:5px 5px 5px 0;
    }

    .el-main {
        color: #333;
        text-align: center;
        height:100%;
        padding:5px;
        box-sizing: border-box;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    /*title样式*/
    .title_box {
        overflow: hidden;
        display: block;
    }
    .title_name {
        float: left;
        display: block;
        height:25px;
        line-height:25px;
    }

    .title_name span {
        display: inline-block;
        width: 3px;
        height: 21px;
        background-color: #44bfca;
        vertical-align: sub;
    }

    .title_name h3 {
        display: inline-block;
        font-weight: bolder;
        margin:0;
        height:25px;
        line-height:25px;
    }
    /*覆盖下划线.el-divider--horizontal样式*/
    .el-divider--horizontal {
        margin: 8px 0;
    }
    /*场景模板样式*/
    .list-group-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #00CED1;
        margin: 8px auto;
        width: 90%;
        font-weight: normal;
        font-size:14px;
        overflow: hidden;
    }
    .list-group-item:hover {
        cursor: default;
        background-color: #00BFFF;
    }
    /*当前场景样式*/
    .active {
        background-color:#00BFFF!important;
    }
    .list-active {
        background-color:#ebebeb;
    }
    .el-main .el-card__body {
        height:100%;
        box-sizing: border-box;
    }
    /*当前场景样式*/
    .active {
        background-color:#00BFFF!important;
    }
    .layui-layout-admin .layui-body .layadmin-tabsbody-item {
        padding:0;
    }
    .el-card__body {
        padding:0;
    }
    .el-main .el-card__body {
        padding:0 12px;
    }
    /*对话框样式*/
    .sessionBox {
        width:100%;
        height:75%;
        border:1px solid #ccc;
        border-radius:4px;
        margin:5px 0;
        box-sizing: border-box;
    }
    #group_role {
        width:100%;
        height:calc(25% - 50px);
        overflow: auto;
        text-align: left;
        /*background-color:pink;*/
    }
    /*会话样式*/
    .sessionContent {
        width:100%;
        padding:10px 10px;
        text-align: left;
        box-sizing: border-box;
        margin-bottom:5px;
        overflow: hidden;
    }
    .sessionContent_topBox {
        height:calc(100% - 70px);
        overflow: auto;
        background-color:#ebebeb;
    }
    .sessionContent_bottomBox {
        border-top:1px solid #ccc;
        height:50px;
        background-color:#fff;
        text-align: left;
        padding-top:15px;
        padding-left:10px;
        position:relative;
    }
    .sessionContent img {
        width:35px;
        height:35px;
        display: inline-block;
        vertical-align: middle;
        z-index: 200;
        position:relative;
    }
    .other {
        display: inline-block;
        vertical-align: middle;
    }
    #orderBox {
        width:100%;
    }
    /*原始会话样式*/
    .sessionContent .content {
        background-color:#fff;
        padding:10px 18px;
        border-radius: 10px;
        position:relative;
        top:8px;
        box-sizing: border-box;
        font-size:17px;
        display: inline-block;
        border:1px solid #fff;
        cursor:pointer;
        max-width: calc(100% - 60px);
    }
    .sessionContent .content:hover{
        border:1px solid #b2e281;
    }
    /*当前会话背景样式*/
    .contentActive {
        background-color:#b2e281;
        padding:10px 18px;
        border-radius: 10px;
        position:relative;
        top:8px;
        box-sizing: border-box;
        font-size:17px;
        display: inline-block;
        /*当前样式变化*/
        border:1px solid #b2e281;
        cursor:pointer;
        max-width: calc(100% - 60px);
    }
    .sessionContent .content .triangle {
        display: block;
        height: 0px;
        width: 0px;
        border: 7px solid transparent;
        border-bottom-color: #fff;
        background:#ebebeb;
        position: absolute;
        top: -15px;
        left: 12px;
    }
    /*当前会话三角板样式*/
    .triangleActive {
        display: block;
        height: 0px;
        width: 0px;
        border: 7px solid transparent;
        /*当前样式变化*/
        border-bottom-color: #b2e281;
        background:#ebebeb;
        position: absolute;
        top: -15px;
        left: 12px;
    }
    /*当前对话角色*/
    #left_role {
        height:100%;
        display:inline-block;
    }
    #right_role {
        height:100%;
        display:inline-block;
    }
    #say_box {
        width:50px;
        height:100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
    }
    #say_box i {
        display: inline-block;
        font-size:30px;
    }
    #left_role img {
        wdith:35px;
        height:35px;
        display: inline-block;
    }
    #left_role .other {
        display: inline-block;
    }
    #right_role img {
        width:35px;
        height:35px;
        display: inline-block;
    }
    #right_role .other {
        display: inline-block;
    }
    #left_role span {
        padding-left:2px;
    }
    #right_role span {
        padding-left:2px;
    }
    /*对错框样式*/
    .getScore {
        width:52px;
        height:23px;
        display: inline-block;
        overflow: hidden;
        padding-top:20px;
        padding-left:5px;
    }
    .correct {
        background: url("src/style/res/correct.png") no-repeat;
        background-size: 23px 23px;
        width:23px;
        height:23px;
        position:relative;
        display: inline-block;
        top:15px;
        border-radius: 23px;
        border:1px solid #ebebeb;
    }
    .wrong {
        background: url("src/style/res/wrong.png") no-repeat;
        background-size: 23px 23px;
        width:23px;
        height:23px;
        position:relative;
        display: inline-block;
        top:15px;
        border-radius: 23px;
        border:1px solid #ebebeb;
    }
    .correct:hover {
        cursor: pointer;
        border:1px solid rgba(128, 128, 128, 0.3);
    }
    .wrong:hover {
        cursor: pointer;
        border:1px solid rgba(128, 128, 128, 0.3);
    }
    /*.iframe弹窗样式*/
    #layui-layer-iframe100001 {
        height:100%;
    }

</style>
<div id="test2">
    <el-container>
        <el-main>
            <el-card style="height:100%;box-sizing: border-box;">
                <div class="title_box">
                    <div class="title_name" style="margin-top:12px;">
                        <span></span>
                        <h3>{{sceneData.sceneName}}</h3>
                    </div>
                </div>
                <!--指令框-->
                <div class="sessionBox">
                    <div class="sessionContent_topBox">
                        <div class="sessionContent" v-for="(item,index) in orderList" :key="index">
                            <div>
                                <img :src="logo(item.sender)">
                                <div class="other">
                                    <div><el-tag size="mini">{{item.sender.dept}}</el-tag></div>
                                    <span style="color:#5c5c5c;padding-left:5px;">{{item.sender.roleName}}</span>
                                </div>
                            </div>
                            <div id="orderBox">
                                <div :class="activeOrderIndex==item.orderIndex?'contentActive':'content'" @click="orderHandle(item)">
                                    <span :class="activeOrderIndex==item.orderIndex?'triangleActive':'triangle'"></span>
                                    <p v-if="item.orderType == 0">{{item.orderContent}}<span style="color:red;margin-left:30px;font-size:14px;">{{item.error}}</span></p>
                                    <audio v-else-if="item.orderType == 1" :src="item.orderContent" autoplay="autoplay" controls="controls" style="outline: none;width:240px;height:25px;margin-top:3px;">不支持</audio>
                                    <p v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                                </div>
                                <!--当前对话框 对错判断-->
                                <div class="wrong" v-show="wrongShow(item)" @click="wrongClick(item.id)"></div>
                                <div class="correct" v-show="activeOrderIndex==item.orderIndex" @click="correctClick($event,item)"></div>
                            </div>
                        </div>
                    </div>
                    <!--谁对谁说话-->
                    <div class="sessionContent_bottomBox">
                        <div id="left_role">
                            <img :src="logo(sender)">
                            <div class="other">
                                <div><el-tag size="mini">{{sender.dept}}</el-tag></div>
                                <span>{{sender.roleName}}</span>
                            </div>
                        </div>
                        <div id="say_box">
                            <i class="el-icon-mic"></i>
                        </div>
                        <div id="right_role">
                            <img :src="logo(accepter)">
                            <div class="other">
                                <div><el-tag size="mini">{{accepter.dept}}</el-tag></div>
                                <span>{{accepter.roleName}}</span>
                            </div>
                        </div>
                        <el-button style="text-align:right;position:absolute;right:428px;" @click="exportScriptError">评讲导出</el-button>
                        <el-button style="text-align:right;position:absolute;right:320px;" @click="exportScript">脚本导出</el-button>
                        <el-button style="text-align:right;position:absolute;right:212px;" @click="setWeight">框架评估</el-button>
                        <el-button style="text-align:right;position:absolute;right:104px;" @click="outputScore">统计评分</el-button>
                        <el-button style="text-align:right;position:absolute;right:10px;" @click="nextOrder" :disabled="isLastOrder">下一条</el-button>
                        <!--脚本评价-->
                    </div> 
                </div>
                <div id="group_role">
                    <div v-for="(item,index) in roleGroup" :key="index" style="display: inline-block;margin-left:15px;">
                        <div class="title_box">
                            <div class="title_name" style="margin-top:12px;">
                                <span></span>
                                <h3>{{item.groupName}}</h3>
                            </div>
                        </div>
                        <div style="text-align: left;display: block;margin-top:5px;">
                            <div v-for="(item2,index2) in item.roles":key="index2" style="display: inline-block;width:80px;height:75px;text-align: center;vertical-align: middle;">
                                <img style="width:35px;height:35px;" :src="logo(item2)">
                                <span style="display: block;">{{item2.roleName}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-main>
        <el-aside width="250px">
            <el-card id="sceneList" style="height:100%;box-sizing:border-box;padding:0 12px;">
                <div class="title_box" style="margin-top:12px;">
                    <div class="title_name">
                        <span></span>
                        <h3>场景列表</h3>
                    </div>
                </div>
                <el-divider></el-divider>
                    <div class="list-group-item" :class="[activeSceneid==item.id?'active':'']"
                         v-for="(item,index) in sceneList"
                         :key="item.index" @click="clickScene(item)" >
                        {{index+1+"、"+item.sceneName }}
                    </div>
            </el-card>
        </el-aside>
    </el-container>
</div>
<script>
    var script_id = '';
    //错误指令id
    var wrongOrderId;
    var test2 = new Vue({
        el:"#test2",
        data(){
            return {
                //脚本id
                scriptid:"",
                activeSceneid:"",
                sceneData:{},
                //场景列表
                sceneList: [],
                orderList:[],
                roleGroup:[],
                //当前指令索引
                activeOrderIndex:1,
                    //当前对话角色
                //发送者
                sender:{},
                //接受者
                accepter:{},
                isLastOrder:false,
                //tip是否可用状态
                tipStatus:true,
                roleLogo:{}
            }
        },
        mounted(){
            //从url获取脚本id
            this.getScriptId();
        },
        methods:{
            //错
            wrongClick(id){
                console.log(id);
                wrongOrderId = id;
                //弹窗
                parent.layer.open({
                    type: 2,
                    title: '设置指令错误信息',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['400px', '290px'],
                    content: '/dialog/order/setOrderWrongMessage.html',
                })
            },
            //对
            correctClick(event,item){
                //判断是对是错
                if(item.isError){ //是错
                    //修改本地数据
                    item.isError = false;
                    //清空错误信息
                    item.error = "";
                    //发送移除错误请求
                    this.errorClear(item.id);
                }
                //获取dom
                let correct = event.target;
                let wrong = correct.parentNode.children[1];
                //隐藏
                correct.style.display = "none";
                wrong.style.display = "none";
                //跳转下一条
                this.nextOrder();
            },
            //对错显示判断
            wrongShow(item){
                if(this.activeOrderIndex==item.orderIndex){
                    return true;
                }else{
                    if(item.isError){
                        return true;
                    }else{
                        return false;
                    }
                }
            },
            clickScene(item){
                //当前场景标签切换
                this.activeSceneid = item.id;
                //当前场景数据赋值
                this.sceneData = item;
                //当前指令索引恢复默认
                this.activeOrderIndex = 1;
                //查询场景指令
                this.searchSceneOrder(this.activeSceneid);
                //查询场景角色
                this.searchSceneRole(this.activeSceneid);
            },
            getScriptId(){
                let url = window.location.hash;
                let index = url.indexOf("=");
                //存储脚本id
                this.scriptid = url.slice(index+1);
                script_id = this.scriptid;
                //查询场景
                this.searchScene();
            },
            //查询脚本下绑定的场景
            searchScene(){
                if(this.scriptid){
                    let params = {
                        scriptid:this.scriptid
                    }
                    axios.get('/script/find_scene',{params}).then(res=>{
                        if(res.data.success){
                            this.sceneList = res.data.data;
                            if(this.activeSceneid == ""){
                                this.activeSceneid = this.sceneList[0].id;
                                //查询场景指令
                                this.searchSceneOrder(this.activeSceneid);
                                //查询场景角色
                                this.searchSceneRole(this.activeSceneid);
                                this.sceneData = this.sceneList[0];
                            };
                        }else{
                            this.$message.error(res.data.message);
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
                }
            },
            //查询当前场景指令
            searchSceneOrder(id){
                //当前场景id赋值
                this.activeSceneid = id;
                let params = {
                    page:1,
                    pageSize:10,
                    sceneid:id
                }
                axios.get('/order/list',{params}).then(res=>{
                        this.orderList = res.data.content;
                        console.log("当前场景指令！");
                        console.log(this.orderList);
                        if(this.orderList.length > 0){
                            //当前指令发送者赋值
                            this.sender = this.orderList[0].sender;
                            //当前指令接收者赋值
                            this.accepter = this.orderList[0].accepter;
                            //判断是否开启 "下一条" 按钮禁用
                            if(this.activeOrderIndex == this.orderList.length){
                                this.isLastOrder = true;
                            }else {
                                this.isLastOrder = false;
                            }
                        }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //查询场景角色
            searchSceneRole(sceneId){
                let params = {
                    id:sceneId
                }
                axios.get('/scene/list_role',{params}).then(res=>{
                    if(res.data.success){
                        this.roleGroup = res.data.roles;
                        this.roleLogo = {};
                        var index = 0;
                        for(var i=0; i<this.roleGroup.length; i++){
                        	var roles = this.roleGroup[i].roles;
                        	for(var j=0; j<roles.length; j++){
                        		index++;
                        		this.roleLogo['role'+roles[j].id] = '/avatar/'+index+'.png';
                        	}                        	
                        }
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //指令点击事件
            orderHandle(item){
                //当前对话指令索引赋值
                this.activeOrderIndex = item.orderIndex;
                //判断是否开启 "下一条" 按钮禁用
                if(this.activeOrderIndex == this.orderList.length){
                    this.isLastOrder = true;
                }else {
                    this.isLastOrder = false;
                }
                //当前指令发送者赋值
                this.sender = item.sender;
                //当前指令接收者赋值
                this.accepter = item.accepter;
            },
            //下一条指令
            nextOrder(){
                let list = this.orderList;
                this.activeOrderIndex += 1;
                for(let i = 0;i < list.length;i++){
                    if(list[i].orderIndex == this.activeOrderIndex){
                        this.sender = list[i].sender;
                        this.accepter = list[i].accepter;
                    }
                }
                //是最后一条开启按钮禁用
                if(this.activeOrderIndex == list.length){
                    this.isLastOrder = true;
                }
            },
            //修改指令错误状态
            setOrderErrorStatus(id,message){
                let list = this.orderList;
                for(let i = 0;i < list.length;i++){
                    if(id == list[i].id){
                        list[i].isError = true;
                        list[i].error = message;
                    }
                }
            },
            //清除指令错误
            errorClear(orderId){
                let form = new FormData();
                form.append('id',orderId);
                axios.post('/order/clear_error',form).then(res=>{
                    if(!res.data.success){
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //统计评分弹窗
            outputScore(){
                //弹窗
                parent.layer.open({
                    type: 2,
                    title: '统计评分',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['700px', '560px'],
                    content: '/dialog/script/score.html',
                })
            },
            setWeight(){
            	parent.layer.open({
                    type: 2,
                    title: '设置权重',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['700px', '560px'],
                    content: '/dialog/script/weight.html',
                    full:function(layero,index){
                        console.log(layero[0].childNodes[1]);
                        let layer_content = layero[0].childNodes[1];
                        layer_content.style.height = "100%";
                        let iframe = layer_content.getElementsByTagName("iframe")[0];
                        iframe.style.height = "100%";
                    }
                })
            },
            logo:function(item){        		
        		var key = 'role'+item.id;
            	return this.roleLogo[key];
        	},
        	exportScript(){
        		var url = '/script/export?scriptid='+ this.scriptid;
        		console.log(url);
        		axios.get(url).then(res=>{
                    if(res.data.success){
                        var file = res.data.fileurl;
                        window.open(file,'_blank');
                    }
                }).catch(err=>{
                    console.log(err);
                })
        	},
        	exportScriptError(){
        		var url = '/script/export_error?scriptid='+ this.scriptid;
        		console.log(url);
        		axios.get(url).then(res=>{
                    if(res.data.success){
                        var file = res.data.fileurl;
                        window.open(file,'_blank');
                    }
                }).catch(err=>{
                    console.log(err);
                })
        	}
        }
    })
</script>
</body>
</html>